<template>
  <div>
    <lab_head />
    <lab_header />

    <div class="container layout layout-margin-top">

      <ol class="breadcrumb">
        <li><a href="/courses/">全部课程</a></li>

        <li class="active">
          <a href="/courses/1">
            {{ course.title }}
          </a>
        </li>
      </ol>

      <div class="row">
        <div class="col-md-9 layout-body">
          <div class="side-image side-image-mobile">
            <img src="https://dn-simplecloud.shiyanlou.com/ncn1.jpg?imageView2/0/h/300">
          </div>
          <div class="content course-infobox">
            <div class="clearfix course-infobox-header">
              <h4 class="pull-left course-infobox-title">
                <span>{{ course.title }}</span>|<span @click='dialogVisible=true'>购买课程</span>
              </h4>
              <div class="pull-right course-infobox-follow">
                <span class="course-infobox-followers">{{course.follow_count}}</span>
                <span>人关注</span>

                <i
                  v-if="course.follow==true"
                  class="fa fa-star"
                  @click="follow('2')"
                ></i>
                <i
                  v-else
                  class="fa fa-star-o"
                  @click="follow('1')"
                ></i>
              </div>
            </div>




            <div class="clearfix course-infobox-header">
              <h4 class="pull-left course-infobox-title">
<!--                <span>{{ course.title }}</span>|<span @click='dialogVisible=true'>购买课程</span>-->
<!--                <router-link to="/user/login?name=tom&pwd=123" tag="li">用户登陆</router-link>-->
                <router-link :to="to_url">添加节课程1</router-link>
                <router-link :to="'/qn_upload?id='+id">添加节课程2</router-link>
<!--                <router-link :to="'/' + id">添加节课程</router-link>-->
              </h4>
            </div>









            <div class="clearfix course-infobox-body">
              <div class="course-infobox-content">
                <p>{{course.descrip}}</p>
              </div>
              <div class="course-infobox-progress">
                <!-- <div
                  v-for="(item,index) in section_list"
                  :key="index"
                  :class="[learn_list.indexOf(item.id)!=-1? 'course-progress-finished':'course-progress-new']"
                  style="margin:2px"
                > </div> -->
                <span>（{{ history_list.length}}/{{ section_total }}）</span>
              </div>

              <div class="pull-right course-infobox-price">

              </div>

            </div>

            <div class="clearfix course-infobox-footer">

              <div class="pull-right course-infobox-learned">{{ course.learner }} 人学过</div>
            </div>

          </div>
<!--课程章节相关内容在此div中-->
          <div class="content">
            <div>
              <Tabs
                :datas="types"
                v-model="type_selected"
                @change="change_type"
              ></Tabs>
            </div>

            <div class="tab-content">
              <!-- 实验列表 -->
              <div v-if='type_selected=="list"'>
                <div
                  v-for="chap in course.jielist"
                  :key="chap.id"
                >
                
                  <div class="lab-item ">
                    <h4 class="lab-item-title">{{chap.name}}</h4>
                  </div>
                  <div>
                     <video width="320" height="240" :src="'http://localhost:8000'+chap.video_url" :controls='flag'>
                     </video>
                  </div>
                  <div
                    class="lab-item change_curse"
                    v-for="sect in chap.sections"
                    :key='sect.id'
                  >
                    <div class="lab-item-status">
                      <img src="/static/img/lab-not-ok.png">
                    </div>
                    <div class="lab-item-index">第{{ sect.serial_num }}节</div>
                       
                    <div class="lab-item-title">
                      <router-link :to="{path: '/courses/course_play/', query: {sid: sect.id }}">{{sect.title}}</router-link>
                    </div>
                    <div class="pull-right lab-item-ctrl">
                    </div>
                    <!-- </button> -->
                  </div>
                </div>
              </div>
              <!-- 实验评论 -->
              <div v-if='type_selected=="comment"'>
                <div class="lab-item ">
                  <h4 class="lab-item-title">{{ course_list.name }} 实验评论</h4>
                </div>
                <div class="comment-box">
                  <div class="comment-form">
                    <comment
                      v-for="comment in comment_list"
                      :key="comment.id"
                      :comment='comment'
                      :token='token'
                      :ques_id='ques_id'
                      :res='false'
                      :is_son='"father"'
                    ></comment>
                    <publish
                      :token='token'
                      :ques_id='ques_id'
                    ></publish>

                  </div>
                  <div class="comment-title">最新评论</div>
                  <div class="comment-list">
                  </div>
                  <div class="pagination-container"></div>
                </div>
              </div>
            </div>
          </div>

        </div>

        <lab_sidebar
          :course_list='course_list'
          v-if='course_list'
        ></lab_sidebar>
      </div>
    </div>

    <div>
      <el-dialog
        title="购买课程"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <p>购买:{{goods.title}} 课程</p>
        <p>支付方式: 支付宝</p>
        <p>价格: {{goods.price}}</p>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="pay"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <lab_footer />

  </div>
</template>

<script>
import lab_head from './common/lab_head';
import lab_header from './common/lab_header';
import lab_footer from './common/lab_footer';
import user_info from './common/user_info';
import last_paths from './common/last_paths';
import QR_code from './common/QR_code';
import lab_sidebar from './common/lab_sidebar';
import comment from './common/comment';
import publish from './common/publish';
import { playhistory_get, get_follow_get, follow_post, payurl_post, goods_get, course_get, get_comments_get, get_questions_get, course_show_get, auth_info_get, user_lean_get, report_list_get } from './axios_api/api';
import { config, formatXml } from '../config.js';
export default {
  components: {
    comment,
    lab_head,
    lab_header,
    lab_footer,
    user_info,
    last_paths,
    QR_code,
    lab_sidebar,
    publish,
  },
  data() {
    return {
      flag:true,
      to_url : '',
      user_id: localStorage.getItem('userid'),
      section_total: 0, // 课程小节总数
      history_list: [], // 用户观看了课程的小节
      follow_list: [], // 用户所以关注的课程
      dialogVisible: false, // 购买对话框
      goods: {
        id: '', // 商品id
        goods_type: "2", // 1. vip,  2. 课程
        product_id: "", // 课程, 或者 vip id
        channel_type: "1", // 购买渠道, 1.普通, 2. 促销
        title: '', // 商品名字
        price: 0, // 价格
      }, // 商品数据
      id: 0, // 课程id
      course: {}, // 课程信息
      /**
      {
          "id": 2,
          "chapters": [
              {
                  "id": 1,
                  "sections": [
                      {
                          "id": 1,
                          "create_time": "2020-08-23T08:29:47.131186Z",
                          "update_time": "2020-08-23T08:29:47.131239Z",
                          "title": "基本概念及操作",
                          "serial_num": 1,
                          "chapters": 1
                      },
                      {
                          "id": 2,
                          "create_time": "2020-08-23T08:30:05.129789Z",
                          "update_time": "2020-08-23T08:30:05.129841Z",
                          "title": "用户及文件权限管理",
                          "serial_num": 2,
                          "chapters": 1
                      }
                  ],
                  "create_time": "2020-08-23T08:28:41.017290Z",
                  "update_time": "2020-08-23T08:28:41.017338Z",
                  "title": "Linux 系统简介",
                  "serial_num": 1,
                  "course": 2
              }
          ],
          "create_time": "2020-08-21T04:14:31.939290Z",
          "update_time": "2020-08-23T08:22:54.205940Z",
          "title": "liunx",
          "desc": "要在实验楼愉快地学习，先要熟练地使用 Linux，本实验介绍 Linux 基本操作，shell 环境下的常用命令。",
          "img": "http://127.0.0.1:8000/media/course/linux_Irl37Zq.jpg",
          "status": "1",
          "attention": 200,
          "learner": 23,
          "course_type": 3,
          "course_tag": [
              3
          ]
      }
       */
      // 分类
      types: {
        list: '章节列表',
        comment: '课程评论',
        // report: '实验报告',
        // course: '实验问答',
      },
      type_selected: 'list',
      ques_id: 0,
      comment_list: [],
      course_list: [],
      section_list: [],
      learn_list: [],
      token: '',
      reportlist: [],
    }
  },
  beforeMount() {
  },
  created() {
  },
  mounted() {
    this.id = this.$route.query.id  // 课程id
    this.to_url = '/qn_upload?id=' + this.id
    this.get_course_info()  // 取课程信息
    // this.get_follow()  // 获取用户关注课程列表
    // this.get_playhistory() // 获取播放记录
    // this.get_goods()  // 取课程商品信息(普通销售渠道)
  },
  computed: {
    // 课程关注状态
    follow_status() {
      // this.id  :  2   课程id
      // this.follow_list
        // [
        //     {
        //         "id": 16,
        //         "create_time": "2020-08-27T06:14:53.943071Z",
        //         "update_time": "2020-08-27T06:14:53.943139Z",
        //         "user": 1,
        //         "course": 2
        //     },{},{}
        // ]
      let the = this.follow_list.find(item => item.course == this.id)
      if (the) {
        return true
      } else {
        return false
      }
    },
  },
  methods: {
    getuserpermession(){
      course_permission_get({'userid':this.user_id,'courseid':this.id}).then(resp=>{
          this.flag=resp.flag
      })
    },
    // 获取观看了的小节
    get_playhistory() {
      playhistory_get({ user: this.user_id, course: this.id }).then((resp) => {
        console.log(resp)
        this.history_list = resp.results
      })
    },
    // 获取关注状态
    get_follow() {
      get_follow_get({ user: this.user_id }).then((resp) => {
        console.log(resp)
        this.follow_list = resp.results


      })
    },
    // 关注课程
    follow(action) {
      // 发送用户id, 课程id
      follow_post({ id: this.id, type: action,userid:this.user_id }).then((resp) => {
        console.log(resp)
        // this.get_follow()
        this.course.follow=resp.follow
        this.get_course_info()
      })
    },
    // 生成订单, 获取支付链接
    pay() {
      // goods_id: 课程id
      payurl_post({ goods_id: this.goods.id }).then((resp) => {
        console.log(resp)
        let pay_url = resp.data.pay_url
        // debugger
        window.location = pay_url
      })
    },
    // 获取商品数据
    get_goods() {
      let params = {
        id: this.id
      }
      goods_get(params).then((resp) => {
        console.log(resp)
        let the = resp.results[0]
        this.goods.id = the.id
        this.goods.title = the.title
        this.goods.price = the.price
        // results: [{id: 1, create_time: "2020-08-25T01:20:51.636150Z", update_time: "2020-08-25T02:47:35.424327Z",…}]
        // 0: {id: 1, create_time: "2020-08-25T01:20:51.636150Z", update_time: "2020-08-25T02:47:35.424327Z",…}
        // course: 2
        // create_time: "2020-08-25T01:20:51.636150Z"
        // id: 1
        // is_launched: true
        // pay_type: "1"
        // period: 365
        // price: "99.00"
        // title: "linux入门"
        // update_time: "2020-08-25T02:47:35.424327Z"

        // this.goods.title = resp
      })
    },
    // 获取课程信息
    get_course_info() {
      course_get({ id: this.id,userid:this.user_id }).then(resp => {
        console.log(resp)
        this.course = resp.list
        // this.
        // this.course = resp
        // this.section_total = 0
        // this.course.chapters.map((chap) => {
        //   this.section_total += chap.sections.length
        // })

        // 通过课程查询到课程对应的商品信息
        // var the = resp.goods_set[0]
        // this.goods.id = the.id
        // this.goods.title = the.title
        // this.goods.price = the.price

      })
    },
    // 用户头像
    userphoto(photo) {
      if (photo === '1.jpg') {
        return config['uploadurl'] + photo
      } else {
        return config['qiniuurl'] + photo
      }
    },
    collect_click(id) {
      this.$Message(id)
    },
    // 加载实验评论
    get_comments() {
      console.log('加载实验评论')
      var params = { type: 'comment', cid: this.id }
      get_questions_get(params).then(resp => {
        console.log(resp.data)
        this.ques_id = resp.data[0].id
        var params2 = { ques_id: resp.data[0].id }
        // 已登录展示收藏情况
        var token = localStorage.getItem('token')
        if (token)
          params2.token = token
        console.log(params2)
        get_comments_get(params2).then(resp => {
          this.comment_list = resp.data
        })
      })
    },

    // 切换分类
    change_type() {
      if (this.type_selected === 'report') {
        let params = { cid: this.$route.query.id }
        report_list_get(params).then(resp => {
          this.reportlist = resp.reportlist
          console.log(this.reportlist)
        })
      }
    },

    // 获取学习状态
    get_lean_msg() {
      let token = localStorage.getItem('token');
      let cid = this.$route.query.id
      if (token) {
        user_lean_get({ token: token, cid: cid }).then(res => {

          for (var i = 0; i < res.data.length; i++) {
            this.learn_list.push(res.data[i].sid)
          }
        })
      }
    }
  },
  filters: {
    learn_filter(num) {
      if (num) {
        return num
      } else {
        return 0
      }
    },
    exper_filter(value) {
      return value / 10
    },
    content_filter(value) {
      return value.length
    },

  }
}
</script>

<style>
</style>
